<template>
  <el-container>
    <el-header class="header">
      <el-menu class="menu" :default-active="defaultActive" mode="horizontal" background-color="#1f293d"
               text-color="#ffffff" active-text-color="#ffffff" router>
        <el-menu-item index="Home" :route="{name:'Home'}">首页</el-menu-item>
        <el-menu-item index="Table" :route="{name:'Table'}">表</el-menu-item>
        <el-menu-item index="Record" :route="{name:'Record'}">数据</el-menu-item>
        <div class="flex-1"></div>
        <el-menu-item class="logout-dropdown" index="">
          <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">
                <i class="el-icon-switch-button"></i>
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <keep-alive>
        <!-- keep-alive 保持子页面状态 -->
        <router-view v-if="$route.meta['keepAlive']"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta['keepAlive']"></router-view>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    init() {
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$message.info('Logout')
      }
    }
  },
  computed: {
    defaultActive() {
      return this.$route.name
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.header {
  padding: 0;
  color: white;

  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;

    li {
      &.el-menu-item {
        border-bottom: 0 !important;

        &.is-active {
          background-color: #111621 !important;
        }
      }
    }

    .flex-1 {
      flex: 1;
    }

    .logout-dropdown {
      padding: 0;
      min-width: 100px;

      div {
        width: 100%;

        span {
          display: block;
        }
      }
    }
  }
}
</style>
